<template>
  <div class="content">
    <div class="bg">
      <div class="title-box">
        <div class="title-name">AI智能识别交互</div>
      </div>
      <div class="content-box center">
        <div class="suddongpo-jpg-box">
          <img :src="deafultUrl" mode="aspectFit" style="width: 20vw;" class="" />
        </div>
        <div class="chat-box">
          <scrollview :scroll-y="true" style="height: 60vh;" ref="scrollview">
            <div v-for="(item,index) in chatLIst" :key="index" style="padding: 2vh 0vw;">
              <div class="left">
                <div @click="playerMp3(item.questionVoiceUrl)" v-if="item.questionVoiceUrl">
                  <img src="../../../static/image/question.png" mode="aspectFit" style="width: 15vw;">
                </div>
                <div class="left-text" v-if="item.questionTxtContent">
                  {{item.questionTxtContent}}
                </div>
              </div>
              <div class="right" style="padding-top: 2vh;" v-if="item.showAnser">
                <div @click="playerMp3(item.answerVoiceUrl)" v-if="item.answerVoiceUrl">
                  <img src="../../../static/image/answer.png" alt="" mode="aspectFit" style="width: 15vw;">
                </div>
                <div class="right-text" v-if="item.answerTxtContent">
                  {{item.answerTxtContent}}
                </div>
              </div>
            </div>
          </scrollview>
        </div>
      </div>
      <!-- <div class="voice-box center" @mousedown="start" @mouseup="end">
        <div>
          <img v-if="isTouch" src="../../../static/image/voice-touch.png" mode="aspectFit" style="width: 5vw;" />
          <img v-else src="../../../static/image/voice.png" mode="aspectFit" style="width: 5vw;" />
        </div>
        
      </div> -->
      <div class="voice-box center">
        <button v-if="isTouch" @click="end" class="end"></button>
        <button v-else @click="start" class="start"></button>
      </div>

    </div>
  </div>
</template>

<script>
  // const maxCount = 8

  import scrollview from "@/components/scrollview.vue"
  import {
    upload2,
    upload3
  } from "@/api/interact/index.js"
  export default {
    data() {
      // const no_heard_box = require("../../../static/image/sudongpobox.jpg")
      // const no_talk = require("../../../static/image/sudongpo.jpg")
      // const talking = require("../../../static/gifs/sudongpo.gif")
      return {
        chatLIst: [],
        isTouch: false,
        audio: new Audio(),
        orderNum: 0,
        dot: "",
        tips: "请长按说话",
        /**鼠标点击的开始时间*/
        mouseDownTime: 0,
        maxCount: 8,
        // sudongpoUrl: this.no_heard_box
        no_heard_box: require("../../../static/image/sudongpobox.jpg"),
        no_talk: require("../../../static/image/sudongpo.jpg"),
        talking: require("../../../static/gifs/sudongpo.gif"),
        deafultUrl: "",
        isStartTalk: false,

      }
    },
    created() {
      this.deafultUrl = this.no_heard_box
    },
    components: {
      scrollview
    },
    watch: {
      isTouch(newVal) {
        let that = this;
        clearTimeout(that.dot)
        if (newVal) {
          //超过30秒,结束录音
          that.dot = setTimeout(() => {
            //调用第三个接口
            console.log("自动结束")
            that.end()
          }, 1000 * 30)
        }
      }
    },
    methods: {
      start: function() {
        //记录按下的时间
        this.mouseDownTime = new Date().getTime();
        this.isTouch = true
        this.RealizeRecorder.startRecord()
      },
      end: function() {
        let that = this;
        let curentTime = new Date().getTime();
        if (curentTime - this.mouseDownTime < 1000) {
          this.isTouch = false
          alert("不能小于1秒哦~")
          return
        }
        clearTimeout(that.dot)
        this.isTouch = false
        this.RealizeRecorder.pauseRecord();
        const wavBlob = this.RealizeRecorder.recorder.getWAVBlob();
        // 创建一个formData对象
        var formData = new FormData()
        let fileName = new Date().getTime() + ".mp3";
        const newbolb = new Blob([wavBlob], {
          type: 'audio/mp3'
        })
        // 获取当时时间戳作为文件名
        const fileOfBlob = new File([newbolb], fileName)
        formData.append('file', fileOfBlob)
        formData.append('fileName', fileName)
        this.orderNum = this.orderNum + 1;
        formData.append('orderNum', this.orderNum > this.maxCount ? 1 : this.orderNum)
        upload2(formData).then(res => {
          if (res.code == 0) {
            //定义一个变量,操作是否展播放和展示声音和答案
            res["showAnser"] = false;
            //获取随机数,更真实(1~2秒)
            let randomNum = that.getRandomNum();
            this.chatLIst.push(res)
            this.$nextTick(() => {
              that.autoToBottom()
            });
            clearTimeout(that.dot)
            if (res.answerVoiceUrl) {
              that.dot = setTimeout(() => {
                res["showAnser"] = true
                that.$nextTick(() => {
                  that.autoToBottom()
                });
                that.playerMp3(res.answerVoiceUrl)
              }, randomNum * 1000)
            }
          }
        })
      },
      getAnser3() {
        let that = this
        upload3().then(res => {
          // console.log(res)
          if (res.code == 0) {
            this.orderNum = this.orderNum + 1
            //定义一个变量,操作是否展播放和展示声音和答案
            res["showAnser"] = true;
            this.chatLIst.push(res)
            that.$nextTick(() => {
              that.autoToBottom()
            });
            if (res.answerVoiceUrl) {
              this.playerMp3(res.answerVoiceUrl)
            }
          }
        })
      },
      getRandomNum: function() {
        //获取随机数,更真实(1~2秒)
        return Math.round(Math.random() * 1 + 1);
      },
      playerMp3: function(url) {
        let that = this;
        this.deafultUrl = this.talking
        // console.log("播放mp3")
        this.audio.src = url;
        this.audio.play();
        this.audio.addEventListener("ended", function() {
          console.log('播放完毕')
          that.deafultUrl = that.no_talk
          clearTimeout(that.dot)
          // console.log(that.orderNum)
          if (that.orderNum == 2) {

            that.dot = setTimeout(() => {
              that.getAnser3();
            }, 3 * 1000)
          }
        }, false)
      },
      autoToBottom: function() {
        this.$refs.scrollview.autoToBottom()
      }
    },
    beforeDestroy() {
      clearTimeout(this.dot)
      this.audio.pause();
    }
  }
</script>

<style scoped>
  .content {
    height: 100%;
    width: 100%;
  }

  .bg {
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
    background-image: url('../../../static/image/background.jpg');
    background-position: center;
    background-repeat: no-repeat;
  }

  .title-box {
    position: relative;
    text-align: center;
    top: 8vh;
    color: #fff;
    font-size: 20px;

  }

  .chat-box {
    /* border: 1px solid #fff; */
    height: 66vh;
    width: 30vw;
    color: #fff;
  }

  .voice-box {
    position: relative;
    bottom: -8vh;
    text-align: center;
  }

  .voice-notouch {
    background-image: url("../../../static/image/voice.png");
    width: 108px;
    height: 108px;
  }

  .voice-touch {
    background-image: url("../../../static/image/voice-touch.png");
    width: 108px;
    height: 108px;
    position: relative;
  }

  .content-box {
    display: flex;
    align-items: center;
    height: 70vh;
    width: 70vw;
    justify-content: space-around;
    position: relative;
    top: 10vh;
  }

  .center {
    left: 0;
    right: 0;
    margin: auto;
  }

  .left {
    text-align: left;
  }

  .right {
    text-align: right;
  }

  .left-text {
    width: 18vw;
    padding-left: 2vw;
    font-size: 16px;
  }

  .right-text {
    width: 100%;
    padding-right: 2vw;
    padding-left: 10vw;
    font-size: 16px;
  }

  .tips {
    padding-top: 1vh;
    color: #fff;
  }

  .start {
    background-image: url("../../../static/image/voice.png");
    width: 80px;
    height: 80px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    background-size: 100% 100%;
    border: none;
  }

  .end {
    background-image: url("../../../static/image/voice-touch.png");
    width: 80px;
    height: 80px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    background-size: 100% 100%;
    border: none;
  }
</style>